<template>
  <div class="selected-tag-wrap">
    <div class="f-list-wrap"
         v-for="(tag, index) in list"
         :key="tag.name">
      <div class="label-wrap">
        <span>
          <img v-if="tag.icon"
               :src="tag.icon"
               alt="图标" />
          <div>{{ tag.name }}</div>
        </span>
      </div>
      <div class="tag-list-wrap">
        <a-space ref="spaceWrap"
                 size="small"
                 align="center"
                 class="space-wrap"
                 :class="{ showMore: tag.isMore }">
          <a-checkable-tag v-for="tagItem in tag.tagList"
                           :key="tagItem.value"
                           :checked="
              checkableMap[tag.name] && !tagItem.isCustom
                ? checkableMap[tag.name].name === tagItem.name
                : false
            "
                           @change="checked => handleChange(tag.name, tagItem, checked, tag)"
                           :class="{ lableClass: tagItem.key === 'custom' }">
            <TagItem v-bind="tagItem"
                     :ref="tagItem.isCustom ? tag.name : 'TagItem'"
                     @sure="
                result => handlerCustomInput(tag.name, tagItem, result, tag)
              "></TagItem>
          </a-checkable-tag>
        </a-space>
      </div>
      <span v-if="tag.hasMore"
            class="flex-align-center"
            :class="{ moreWrap: tag.hasMore }">
        <a @click="showMore(index, tag)">{{ tag.moreTitle }}</a>
      </span>
    </div>
    <Loading :loading="loading"></Loading>
  </div>
</template>

<script>
import Loading from '@/components/Loading/'
import TagItem from '../TagItem'

export default {
  components: {
    Loading,
    TagItem,
  },
  props: {
    checkableTagList: {
      // 多选筛选的列表配置
      type: Array,
      default: () => [],
    },
    checkableMap: Object,
  },
  data() {
    return {
      loading: false,
      selectedTags: [],
      list: [],
    }
  },
  mounted() {
    this.initSetting() // 初始化配置
  },
  methods: {
    initSetting() {
      this.loading = true
      this.list = this.checkableTagList
      // this.$nextTick(() => {
      //   this.normalizeTagList()
      //   this.initOpt()  // 重置配置
      // })
      setTimeout(() => {
        this.normalizeTagList()
        this.initOpt() // 重置配置
        this.loading = false
        this.list.forEach((item, index) => {
          if (item.hasMore && item.isOpen) {
            this.showMore(index)
          }
        })
      }, 500)
    },
    // 重置展开提示
    initOpt() {
      this.checkableTagList.forEach((item) => {
        const { spliceIdx, hasMore } = item
        item.isMore = false
        item.moreTitle = '展开'
        if (hasMore) {
          item.tagList.splice(spliceIdx) // 重新切割数据超出的部分
        }
      })
    },
    normalizeTagList() {
      const refs = this.$refs.spaceWrap // 所有的ref的数组
      const e = document.getElementsByClassName('tag-list-wrap')
      const boxWidth = e[0].clientWidth // 获取容器的总宽度
      refs.forEach((i, index) => {
        const childrens = [...i.children]
        let spliceIdx = -1 // 超出后的元素下标
        childrens.reduce((total, curVal, index) => {
          const v = total + curVal.clientWidth
          if (v > boxWidth && spliceIdx === -1) {
            // 超出后取 坐标 - 1 获取上一个未超出的下标（并且确保只能进入一次，idx不能等于-1）
            spliceIdx = index - 1
          }
          return v
        }, 0)
        // 取出当前chackableList对应的对象
        const curTagItem = this.checkableTagList[index] // 获取当前的对象
        curTagItem.spliceIdx = spliceIdx // 记录分界下标
        if (spliceIdx > 0) {
          // 有下标说明存在超出
          curTagItem.hasMore = true // 显示更多按钮
          curTagItem.moreList = curTagItem.tagList.splice(spliceIdx) // 裁切结果数组
          this.$set(this.list, index, curTagItem) // 动态更新
        }
      })
    },
    showMore(index) {
      const tempItem = this.list[index]
      const { moreList, tagList, spliceIdx, isMore } = tempItem
      let tempList = []
      if (!isMore) {
        // 收起状态
        tempList = tempList.concat(tagList, moreList) // 合并
        tempItem.tagList = tempList
      } else {
        // 展开状态
        tagList.splice(spliceIdx)
      }
      tempItem.isMore = !isMore // 取反当前状态
      tempItem.moreTitle = isMore ? '展开' : '收起'
      this.$set(this.list, index, tempItem)
    },
    // 自定义的输入框结果处理
    handlerCustomInput(fatherTag, childTagItem, result, instance) {
      const { miniV, maxV } = result
      const item = JSON.parse(JSON.stringify(childTagItem))
      item.name = `${item.name}:${miniV}-${maxV}`
      this.$emit('check-update', {
        fatherTag,
        childTagItem: item,
        checked: true,
        instance,
      })
    },
    handleChange(fatherTag, childTagItem, checked, instance) {
      if (childTagItem.isCustom) {
        // 如果是自定义的tag不直接抛出事件
      } else {
        if (this.$refs[fatherTag]) {
          this.$refs[fatherTag].forEach((ref) => ref.initComponentV()) // 执行初始化
        }
        this.$emit('check-update', {
          fatherTag,
          childTagItem,
          checked,
          instance,
        })
      }
    },
  },
}
</script>
